<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../../../css/personimfcss/grouppeople.css">
        <script type="text/javascript"
                src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script th:inline="javascript">
            var userid = [[${userid}]];
            var page=1;
            var page1=(page-1)*18
            var count;
            $(function(){
                $.ajax({
                    url:'grouppeople.do?userid='+userid+'&page='+page1,
                    success:function(data) {//data服务器返回的数据
                        if (data.length != 0) {
                            p = $("<b>当前共有" + data[0].gcount + "个成员" + "</b>")
                            $("#count").append(p)
                            var n = data[0].gcount
                            count = parseInt((n + 18 - 1) / 18)
                            zong = $("<p>共" + count + "页 合计" + n + "条数据</p>")
                            $("#shu").append(zong)
                            $.each(data, function (index, grouppeople) {
                                //创建dom
                                if (index % 3 == 0) {
                                    h = $("<tr></tr>")
                                    $("#group").append(h);
                                }
                                if (grouppeople.hphoto != null) {
                                    g = $("<td><p class=\'bn\'><img src=\"..\\..\\..\\" + grouppeople.hphoto + "\" alt=\"\"></p><p class=\'nb\'><a href=\"javascript:void(0)\">"+grouppeople.stunumber+"<br>"+grouppeople.realname+"</a></p></td>")
                                    h.append(g)
                                }
                                if (grouppeople.hphoto == null) {
                                    g = $("<td><p><img src=\"../../../images/personmes/touxiang.png\" alt=\"\"></p><p class=\'nb\'><a href=\"javascript:void(0)\">"+grouppeople.stunumber+"<br>"+grouppeople.realname+"</a></p></td>")
                                    h.append(g)
                                }
                            })
                            $("#group").append(h);

                        }
                        else {
                            count=0;
                            p = $("<b>当前共有0个成员" + "</b>")
                            $("#count").append(p)
                            zong = $("<p>共0页 合计0条数据</p>")
                            $("#shu").append(zong)
                            mm=$("<p style=\'text-align: center\'>你还没有加入组织，点击组织信息进行加入吧！</p>")
                            $(".zuoce").append(mm)
                        }
                    }
                });
                $("#page1").css("background-color","yellow")
            });

            function check() {
                var username = $("#shousuo").val()
                $("#shousuo").val("");
                if (count > 0) {
                    $("#group").empty();
                    $.ajax({
                        url: 'getpeopleById.do?userid='+userid+'&username=' + username,
                        success: function (data) {//data服务器返回的数据
                            if (data.length != 0) {
                                $.each(data, function (index, grouppeople) {
                                    //创建dom
                                    if (index % 3 == 0) {
                                        h = $("<tr></tr>")
                                    }
                                    if (grouppeople.hphoto != null) {
                                        g = $("<td><p class=\'bn\'><img src=\"..\\..\\..\\" + grouppeople.hphoto + "\" alt=\"\"></p><p class=\'nb\'><a href=\"javascript:void(0)\">" + grouppeople.stunumber + "<br>" + grouppeople.realname + "</a></p></td>")
                                        h.append(g)
                                    }
                                    if (grouppeople.hphoto == null) {
                                        g = $("<td><p><img src=\"../../../images/personmes/touxiang.png\" alt=\"\"></p><p class=\'nb\'><a href=\"javascript:void(0)\">" + grouppeople.stunumber + "<br>" + grouppeople.realname + "</a></p></td>")
                                        h.append(g)
                                    }
                                })
                                $("#group").append(h);

                            }
                        }

                    });
                }
            }
            function f() {
                if (count>0) {
                    page = 1;
                    page1 = (page - 1) * 18
                    console.log(page1)
                    $("#group").empty();
                    lianjie(page1)
                    $("#page1").css("background-color", "yellow")
                    $("#page2").css("background-color", "white")
                    $("#page3").css("background-color", "white")
                }

            }
            function f1() {
                if (count>=2) {
                    page = 2;
                    page1 = (page - 1) * 18
                    $("#group").empty();
                    lianjie(page1)
                    $("#page2").css("background-color", "yellow")
                    $("#page1").css("background-color", "white")
                    $("#page3").css("background-color", "white")
                }
            }
            function f2() {
                if (count>=3) {
                    page = 3;
                    page1 = (page - 1) * 18
                    $("#group").empty();
                    lianjie(page1)
                    $("#page3").css("background-color", "yellow")
                    $("#page1").css("background-color", "white")
                    $("#page2").css("background-color", "white")
                }
            }
            function shouye() {
                f()

            }
            function lianjie(page1) {
                $.ajax({
                    url:'grouppeople.do?userid='+userid+'&page='+page1,
                    success:function(data) {//data服务器返回的数据
                            $.each(data, function (index, grouppeople) {
                                //创建dom
                                if (index % 3 == 0) {
                                    h = $("<tr></tr>")
                                    $("#group").append(h);
                                }
                                if (grouppeople.hphoto != null) {
                                    g = $("<td><p class=\'bn\'><img src=\"..\\..\\..\\" + grouppeople.hphoto + "\" alt=\"\"></p><p class=\'nb\'><a href=\"javascript:void(0)\">"+grouppeople.stunumber+"<br>"+grouppeople.realname+"</a></p></td>")
                                    h.append(g)
                                }
                                if (grouppeople.hphoto == null) {
                                    g = $("<td><p><img src=\"../../../images/personmes/touxiang.png\" alt=\"\"></p><p class=\'nb\'><a href=\"javascript:void(0)\">"+grouppeople.stunumber+"<br>"+grouppeople.realname+"</a></p></td>")
                                    h.append(g)
                                }
                            })
                            $("#group").append(h);
                        }
                });

            }
            function lastpage() {
                if (count > 0) {
                    if (page > 1) {
                        page = page - 1
                        if (page == 1) {
                            f()
                        } else if (page == 2) {
                            f1()
                        } else if (page == 3) {
                            f2()
                        } else if (page > 0) {
                            page1 = (page - 1) * 18
                            $("#page2").css("background-color", "white")
                            $("#page1").css("background-color", "white")
                            $("#page3").css("background-color", "white")
                            if (page > 0) {
                                $("#group").empty();
                                lianjie(page1)
                            }
                        }
                    }
                }
            }
            function nextpage() {
                if (page < count) {
                    page = page + 1
                    if (page == 1) {
                        f()
                    } else if (page == 2) {
                        f1()
                    } else if (page == 3) {
                        f2()
                    } else if (page <= count) {
                        page = 4;
                        $("#page2").css("background-color", "white")
                        $("#page1").css("background-color", "white")
                        $("#page3").css("background-color", "white")
                        page1 = (page - 1) * 18
                        $("#group").empty();
                        lianjie(page1)
                    }

                }
            }
            function tiaozhuang() {
                var p = $("#tiao").val()
                if (p <= count && p > 0) {
                    console.log(p)
                    if (p == 1) {
                        f()
                    } else if (p == 2) {
                        f1()
                    } else if (p == 3) {
                        f2()
                    } else if (p <= count) {
                        $("#page2").css("background-color", "white")
                        $("#page1").css("background-color", "white")
                        $("#page3").css("background-color", "white")
                        $("#tiao").val("")
                        page1 = (page - 1) * 18
                        $("#group").empty();
                        lianjie(page1)
                    }

                }
            }
            function weiye() {
                if (page==1){
                    f()
                }
                if (page==2){
                    f1()
                }
                if (page==3){
                    f2()
                }
                if (page>3){
                    $("#page2").css("background-color","white")
                    $("#page1").css("background-color","white")
                    $("#page3").css("background-color","white")
                    page1=(page-1)*18
                    $("#group").empty();
                    lianjie(page1)
                }

            }
        </script>
    </head>
    <body>
        <div class="zong">
            <div class="main">
                <div class="header">
                    <p id="count"></p>
                    <div class="chazao">
                        查找组员：<input type="text" id="shousuo" placeholder="请输入组员的学号">
                        <input type="button" id="button" value="搜索" onclick="check()">
                    </div>
                </div>
                <div class="zuoce">
                    <table id="group">

                    </table>
                </div>
                <div class="page" >
                    <div class="g">
                        <span><a href="javascript:void(0)" onclick="shouye()">首页</a></span>
                        <span><a href="javascript:void(0)" onclick="lastpage()">上一页</a></span>
                        <ul>
                            <li onclick="f()" id="page1"><a href="javascript:void(0)">1</a></li>
                            <li onclick="f1()" id="page2"><a href="javascript:void(0)">2</a></li>
                            <li onclick="f2()" id="page3"><a href="javascript:void(0)">3</a></li>
                        </ul>
                        <span><a href="javascript:void(0)" onclick="nextpage()">下一页</a></span>
                        <span><a href="javascript:void(0)" onclick="weiye()">尾页</a></span>
                        <form action="">
                            <input type="text" id="tiao">
                            <input type="button" value="跳转" id="tiaobutton" onclick="tiaozhuang()">
                        </form>
                        <p id="shu"></p>
                    </div>               
    
                </div>
           </div>
        </div>
        
    </body>
</html>